<%--
  Created by IntelliJ IDEA.
  User: 林辰育
  Date: 2020/8/4
  Time: 11:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>个人中心</title>
    <!-- 引入JQuery-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- Bootstrap 核心 CSS 文件 -->
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- font-awesome 核心CSS 文件-->
    <link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入自定义css文件 -->
    <link href="static/css/main.css" rel="stylesheet" type="text/css">
    <!-- 在bootstrap.min.js 之前引入 -->
    <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
    <!-- 引入datetimepicker -->
    <link href="static/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
    <!-- Bootstrap 核心 JavaScript 文件 -->
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    <!--引入jquery.validate-->
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    <!--引入datetimepicker-->
    <script src="static/js/bootstrap-datetimepicker.min.js"></script>
    <style type="text/css">
        body{
            background-image: linear-gradient(to right, #f2dede, #a6e1ec);
        }
    </style>
</head>
<body>
    <!-- 修改性别成功提示模态框-->
    <div class="modal fade" id="changeSexModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header"></div>
                <div class="modal-body">
                    <p>设置成功</p>
                </div>
                <div class="modal-footer"></div>
            </div>
        </div>
    </div>

    <div class="container" style="height: 5%"></div>

    <div class="container">
        <div class="row">
            <div class="col-lg-11">
                <div class="page-header">
                    <h2>
                        <i class="fa fa-user"></i>个人中心
                        <a class="btn btn-primary btn-lg insert-btn col-md-offset-8" href="donateGoods">返回首页</a>
                    </h2>
                </div>
                <div class="panel panel-default">
                    <div class="panel-body" style="padding-top:0;">
                        <div class="col-md-12" id="basic_info">
                            <div class="pull-left col-md-12 col-xs-12 col-sm-12 push-up-0">
                                <div class="bar  border-down-e3e3e3 push-up-15">
                                    <h6 class="text-bold pull-left push-up-7 push-down-10" id="username"></h6>
                                </div>
                                <ul class="form-horizontal push-up-5 bar "></ul>
                                <div class="bar  border-down-e3e3e3 push-up-10">
                                    <h6 class="text-bold pull-left push-up-5 push-down-10">基本信息 </h6>
                                </div>
                                <form id="pwd_form">
                                    <ul class="form-horizontal push-up-25 bar" style="padding-bottom: 0">
                                        <li class="form-group">
                                            <label class="col-md-2 col-xs-12 col-sm-12 control-label text-align">原密码：</label>
                                            <div class="col-md-5 col-xs-12 col-sm-12 push-down-0">
                                                <div class="col-md-5 padding-0 left push-right-10" id="old_pwd_div">
                                                    <input type="password" class="form-control" value="******" id="old_pwd" name="old_pwd" disabled="disabled">
                                                </div>
                                                <div class="left code-btn"><input type="button" class="btn btn-default" value="更改" id="updPwd" onclick="clickUpdPwd()"></div>
                                            </div>
                                        </li>
                                    </ul>
                                    <ul class="form-horizontal push-up-15 bar " style="display:none" id="setPwd">
                                        <li class="form-group">
                                            <label class="col-md-2 col-xs-12 col-sm-12 control-label text-align">新密码：</label>
                                            <div class="col-md-5 col-xs-12 col-sm-12 push-down-0">
                                                <span id="new_pwd_strength" class="strength pull-right" style="width:25px;display:inline-block;line-height:30px;"></span>
                                                <input type="password" class="form-control ignore" id="new_pwd" name="new_pwd" style="width:calc(100% - 30px)!important;">
                                                <label class="help-block">安全性高的密码可以使账号更安全，请设置一个包含字母、符号、数字中至少两种且长度超过8位的密码，同时建议定期更换密码。 </label>
                                            </div>
                                        </li>
                                        <li class="form-group">
                                            <label class="col-md-2 col-xs-12 col-sm-12 control-label text-align">确认密码：</label>
                                            <div class="col-md-5 col-xs-12 col-sm-12 push-down-0">
                                                <span id="check_pwd_strength" class="strength pull-right" style="width:25px;display:inline-block;line-height:30px;"></span>
                                                <input type="password" class="form-control ignore" id="check_pwd" name="check_pwd" style="width:calc(100% - 30px)!important;">
                                            </div>
                                        </li>
                                        <!-- 错误信息 -->
                                        <label id="pwd_error" for="pwd_form" style="display: none">密码错误</label>
                                        <div class="col-sm-12 col-xs-12 col-md-12 push-up-20 push-left-50 adapt-btn-box-box">
                                            <div class="col-md-2 col-sm-2 padding-none pull-left btn-21-center">
                                                <input type="button" class="btn btn-primary pull-right btn-block" value="确定" id="savePwd" onclick="clickSavePwd()">
                                            </div>
                                            <div class="col-md-2 col-sm-2 padding-none pull-left push-left-10">
                                                <input type="button" class="btn btn-default pull-left btn-block" value="取消" id="btn_from_cancel" onclick="clickCancelUpdPwd()">
                                            </div>
                                        </div>
                                    </ul>
                                </form>
                                <!-- 邮箱  -->
                                <div class="bar  border-down-e3e3e3 push-up-15"></div>
                                <form id="email_form">
                                    <ul class="form-horizontal push-up-0 bar " style="padding-bottom: 0">
                                        <li class="form-group" >
                                            <label class="col-md-2 col-xs-12 col-sm-12 control-label text-align">邮箱：</label>
                                            <div class="col-md-5 col-xs-12 col-sm-12 push-down-0">
                                                <div class="col-md-5 padding-0 left push-right-10">
                                                    <input type="text" class="form-control" value="00000@qq.com" id="email" name="email" disabled="disabled">
                                                </div>
                                                <div class="left code-btn">
                                                    <input type="button" class="btn btn-default" id="updEmail" value="更改" onclick="clickUpdEmail()">
                                                    <div id="email_btn_box" style="display: none">
                                                        <input type="button" class="btn btn-default" value="确定" id="saveEmail" onclick="clickSaveEmail()">
                                                        <input type="button" class="btn btn-default" value="取消" id="cancelUpdEmail" onclick="clickCancelUpdEmail()">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </form>


                                <!-- 性别 -->
                                <div class="bar  border-down-e3e3e3 push-up-15"></div>
                                <ul class="form-horizontal push-up-0 bar" style="padding-bottom: 0">
                                    <li class="form-group" >
                                        <label class="col-md-2 col-xs-12 col-sm-12 control-label text-align">性别：</label>
                                        <div class="col-md-5 col-xs-12 col-sm-12 push-down-0">
                                            <div class="col-md-5 padding-0 left push-right-10">
                                                <select onchange="changeSex(this)" class="form-control" id="sex">
                                                    <option value="male">男</option>
                                                    <option value="female">女</option>
                                                </select>
                                            </div>
                                        </div>
                                    </li>
                                </ul>


<%--                                <ul class="form-horizontal push-up-15 bar " style="display:none" id="setPhone">--%>
<%--                                    <li class="form-group">--%>
<%--                                        <label class="col-md-4 col-xs-12 col-sm-12 control-label text-align">手机号码：</label>--%>
<%--                                        <div class="col-md-5 col-xs-12 col-sm-12 push-down-0">--%>
<%--                                            <div class="col-md-5 padding-0 pull-left push-right-10">--%>
<%--                                                <input type="text" class="form-control" id="MOBILE" name="MOBILE">--%>
<%--                                            </div>--%>
<%--                                            <div class="left code-btn">--%>
<%--                                                <button class="btn btn-default" id="getMobileword">获取短信验证码</button>--%>
<%--                                                <span id="getShowTimeword" style="background-color:#eeeeee;color:#b0b0b0;display:none;" class="btn btn-default pull-left">60秒后重新获取</span>--%>
<%--                                            </div>--%>
<%--                                            <span class="help-block bar text-success" style="display:none" id="mobile_word_issued">--%>
<%--							                    <i class="fa fa-check push-right-5"></i>手机验证码已发送--%>
<%--						                    </span>--%>
<%--                                            <span class="help-block bar">忘记密码时，可通过该手机号快速找回密码</span>--%>
<%--                                        </div>--%>
<%--                                    </li>--%>
<%--                                    <li class="form-group">--%>
<%--                                        <label class="col-md-4 col-xs-12 col-sm-12 control-label text-align">短信验证码：</label>--%>
<%--                                        <div class="col-md-5 col-xs-12 col-sm-12 push-down-0">--%>
<%--                                            <div class="col-md-5 col-xs-12 col-sm-6 padding-0 push-right-10">--%>
<%--                                                <input type="text" class="form-control" id="mobile_word"></div>--%>
<%--                                            <div class="left code-btn "><button class="btn btn-primary" id="sub_mobile_check">验证手机号</button></div>--%>
<%--                                            <div class="help-block bar ">--%>
<%--                                                <span class="help-block bar">请查收短信，并填写短信中的验证码</span>--%>
<%--                                                <!-- 错误提示样式 start -->--%>
<%--                                                <span class="help-block bar text-danger" id="mobile_word_error" style="display:none">--%>
<%--						                            <i class="fa fa-exclamation-triangle push-right-5"></i>验证码错误--%>
<%--                                                </span>--%>
<%--                                                <!-- 错误提示样式 end -->--%>
<%--                                            </div>--%>
<%--                                        </div>--%>
<%--                                    </li>--%>
<%--                                </ul>--%>
                                    <!--<div class="col-sm-12 col-xs-12 col-md-12 push-up-20 adapt-btn-box">
                                        <div class="col-md-2 col-sm-2 padding-none pull-left btn-21-center">
                                            <button type="button" class="btn btn-primary pull-right btn-block" id="sub_mobile_check">确定</button>
                                            </div>
                                        <div class="col-md-1 col-sm-1 padding-none pull-left push-left-10">
                                            <button type="button" class="btn btn-default pull-left btn-block" id="btn_mobile_cancel">取消</button>
                                        </div>
                                    </div>-->

                                <!-- 修改邮箱  -->
                                <!--<div id="upd_email_form">


                                </div>-->
                                <!-- 设置是否开启人脸识别登录-->

                                <!-- 出生日期 -->
                                <div class="bar  border-down-e3e3e3 push-up-15"></div>
                                <ul class="form-horizontal push-up-20 bar " style="padding-bottom: 0">
                                    <li class="form-group" >
                                        <label class="col-md-2 col-xs-12 col-sm-12 control-label text-align">出生日期：</label>
                                        <div class="col-md-5 col-xs-12 col-sm-12 push-down-0">
                                            <div class="col-md-5 padding-0 left push-right-10">
                                                <div class="input-append date form_datetime" id="form_datetime">
                                                    <input type="text" value="" class="form-control" name="birthday" id="birthday" disabled="disabled" readonly>
                                                    <span class="add-on"><i class="icon-remove"></i></span>
                                                    <span class="add-on"><i class="icon-calendar"></i></span>
                                                </div>
<%--                                            <input type="text" class="form-control" value="0000-00-00" id="birthday" disabled="disabled">--%>
                                            </div>
                                            <div class="left code-btn">
                                                <button class="btn btn-default" id="updBirthday" onclick="clickUpdBirthday()">更改</button>
                                            </div>
                                            <div id="birthday_btn_box" style="display: none">
                                                <input type="button" class="btn btn-default" value="确定" id="saveBirthday" onclick="clickSaveBirthday()">
                                                <input type="button" class="btn btn-default" value="取消" id="cancelUpdBirthday" onclick="clickCancelUpdBirthday()">
                                            </div>
                                        </div>
                                    </li>
                                </ul>

                                <div class="bar  border-down-e3e3e3 push-up-10">
                                    <h6 class="text-bold pull-left push-up-5 push-down-10">个性展示 </h6>
                                </div>

                                <ul class="form-horizontal push-up-25 bar " style="padding-bottom: 0">
                                    <li class="form-group" >
                                        <label class="col-md-2 col-xs-12 col-sm-12 control-label text-align">个性签名：</label>
                                        <div class="col-md-10 col-xs-12 col-sm-12 push-down-0">
                                            <div class="col-md-10 padding-0 left push-right-10">
                                                <input type="text" class="form-control" value="这个人很懒，什么都没有留下" id="personal_sign" disabled="disabled">
                                            </div>
                                            <div class="left code-btn">
                                                <button class="btn btn-default" id="updSign" onclick="clickUpdSign()">更改</button>
                                                <div class="col-sm-12 col-xs-12 col-md-12 push-up-20 push-left-50 adapt-btn-box-box" id="sign_btn_box" style="display: none">
                                                    <div class="col-md-2 col-sm-2 padding-none pull-left btn-21-center">
                                                        <input type="button" class="btn btn-primary pull-right btn-block" value="确定" onclick="clickSaveSign()">
                                                    </div>
                                                    <div class="col-md-2 col-sm-2 padding-none pull-left push-left-10">
                                                        <input type="button" class="btn btn-default pull-left btn-block" value="取消" onclick="clickCancelUpdSign()">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>

                                <!-- 个人简介 -->
                                <div class="bar  border-down-e3e3e3 push-up-15"></div>
                                <ul class="form-horizontal push-up-0 bar " style="padding-bottom: 0">
                                    <li class="form-group" >
                                        <label class="col-md-2 col-xs-12 col-sm-12 control-label text-align">个人简介：</label>
                                        <div class="col-md-10 col-xs-12 col-sm-12 push-down-0">
                                            <div class="col-md-10 padding-0 left push-right-10">
                                                <input type="text" class="form-control" value="暂无简介" id="personal_intro" disabled="disabled">
                                            </div>
                                            <div class="left code-btn">
                                                <button class="btn btn-default" id="updIntro" onclick="clickUpdIntro()">更改</button>
                                            </div>
                                            <div class="col-sm-12 col-xs-12 col-md-12 push-up-20 push-left-50 adapt-btn-box-box" id="intro_btn_box" style="display: none">
                                                <div class="col-md-2 col-sm-2 padding-none pull-left btn-21-center">
                                                    <input type="button" class="btn btn-primary pull-right btn-block" value="确定" onclick="clickSaveIntro()">
                                                </div>
                                                <div class="col-md-2 col-sm-2 padding-none pull-left push-left-10">
                                                    <input type="button" class="btn btn-default pull-left btn-block" value="取消" onclick="clickCancelUpdIntro()">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $().ready(function(){
            //进入页面后，首先获取token信息
            var token_password="";
            var token_email="";
            var token_birthday="";
            var token_sign="";
            var token_intro="";

            get_token();

            $("#pwd_form").validate({
                rules: {
                    old_pwd: {
                        required: true,
                        minlength: 5
                    },
                    new_pwd: {
                        required: true,
                        minlength: 5
                    },
                    check_pwd: {
                        required: true,
                        equalTo:"#new_pwd"
                    }
                },
                messages: {
                    old_pwd: {
                        required: "请输入原密码",
                        minlength: "密码至少由五位字符组成"
                    },
                    new_pwd: {
                        required: "请输入新密码",
                        minlength: "密码至少由五位字符组成"
                    },
                    check_pwd: {
                        required:"请再次输入新密码",
                        equalTo: "两次密码输入不一致"
                    }
                }
            });

            $('#email_form').validate({
                rules: {
                    email: {
                        required:true,
                        email:true
                    }
                },
                messages: {
                    email: {
                        required:"请输入邮箱",
                        email:"邮箱格式有误"
                    }
                }
            });

            $('#form_datetime').datetimepicker({
                format:"yyyy-mm-dd",
                autoclose: true,
                minView: 2
            });
        })

        //发送ajax请求，获取token
        function get_token(){
            $.ajax({
                url:"getToken",
                type:"GET",
                dataType:"JSON",
                success:function(result){
                    //将返回的用户信息保存在token中
                    var token = result;
                    //打印登录用户
                    console.log(token);
                    //打印登录用户的id
                    console.log(token.id);
                    document.getElementById('username').innerText = "您的登录账号："+token.username;
                    token_password = token.password;
                    token_email=document.getElementById('email').value = token.email;
                    document.getElementById('sex').options[token.sex=='male'?0:1].selected = true;
                    token_birthday=document.getElementById('birthday').value = token.birthday;

                    if(token.personalSign){
                        token_sign=document.getElementById('personal_sign').value=token.personalSign;
                    }

                    if(token.personalIntro){
                        token_intro=document.getElementById('personal_intro').value=token.personalIntro;
                    }

                }
            });
        }

        //password
        function clickUpdPwd(){
            $('#updPwd').hide();
            $("#setPwd").show();
            document.getElementById('old_pwd').disabled="";
            document.getElementById('old_pwd').value="";
            document.getElementById('old_pwd_div').style="width:100%";
            document.getElementById('old_pwd').style="width:calc(100% - 30px)!important;";
        }
        function clickCancelUpdPwd(){
            $('#old_pwd-error').hide();
            $('#new_pwd-error').hide();
            $('#check_pwd-error').hide();
            document.getElementById('old_pwd').style="";
            document.getElementById('old_pwd_div').style="";
            document.getElementById('old_pwd').value="******";
            document.getElementById('old_pwd').disabled="disabled";
            $('#setPwd').hide();
            $('#updPwd').show();
        }
        function clickSavePwd(){
            var validator = $("#pwd_form").validate();
            if(validator.form()){
                if(document.getElementById('old_pwd').value == token_password){
                    $.post("updatePwd",
                        {
                            password:document.getElementById('new_pwd').value
                        },
                        function (data){
                            token_password = document.getElementById('new_pwd').value;
                            clickCancelUpdPwd();
                        }
                    )
                } else{
                    $("#pwd_error").show();
                    setTimeout(function(){
                        $("#pwd_error").hide();
                    },2000);
                }
            }
        }

        //Email部分
        function clickUpdEmail(){
            document.getElementById('email').disabled="";
            $('#updEmail').hide();
            $('#email_btn_box').show();
        }
        function clickSaveEmail(){
            var validator=$('#email_form').validate();
            if(validator.form()){
                $.post("updateEmail",
                    {
                        email:document.getElementById('email').value
                    },
                    function (data) {
                        token_email=document.getElementById('email').value;
                        clickCancelUpdEmail();
                    }
                )
            }
        }
        function clickCancelUpdEmail(){
            $('#email_btn_box').hide();
            $('#updEmail').show();
            document.getElementById('email').value=token_email;
            document.getElementById('email').disabled="disabled";
            $('#email-error').hide();
        }

        //Sex部分
        function changeSex(sobj){
            var docur = sobj.options[sobj.selectedIndex].value;
            if (docur !=""){
                $.post("updateSex",
                    {
                        sex: docur
                    },
                    function (data){
                        $('#changeSexModal').modal('show');
                        setTimeout(function () {
                            $("#changeSexModal").modal('hide');
                        }, 1000);
                    }
                )
            }
        }

        function clickUpdBirthday() {
            $('#updBirthday').hide();
            $('#birthday_btn_box').show();
            document.getElementById('birthday').disabled="";
        }

        function clickSaveBirthday() {

            $.post("updateBirthday",
                {
                    birthday:document.getElementById('birthday').value
                },
                function (data) {
                    token_birthday=document.getElementById('birthday').value;
                    clickCancelUpdBirthday();
                }
            )
        }
        function clickCancelUpdBirthday() {
            $('#birthday_btn_box').hide();
            $('#updBirthday').show();
            document.getElementById('birthday').value=token_birthday;
            document.getElementById('birthday').disabled="disabled";
        }

        //Sign部分
        function clickUpdSign(){
            document.getElementById('personal_sign').disabled="";
            $('#updSign').hide();
            $('#sign_btn_box').show();
        }
        function clickSaveSign(){
            $.post("updatePersonalSign",
                {
                    personalSign:document.getElementById('personal_sign').value
                },
                function (data) {
                    token_sign=document.getElementById('personal_sign').value;
                    clickCancelUpdSign();
                }
            )
        }
        function clickCancelUpdSign(){
            $('#sign_btn_box').hide();
            $('#updSign').show();
            document.getElementById('personal_sign').value=token_sign;
            document.getElementById('personal_sign').disabled="disabled";
        }


        //Intro部分
        function clickUpdIntro(){
            document.getElementById('personal_intro').disabled="";
            $('#updIntro').hide();
            $('#intro_btn_box').show();
        }
        function clickSaveIntro(){
            $.post("updatePersonalIntro",
                {
                    personalIntro:document.getElementById('personal_intro').value
                },
                function (data) {
                    token_intro=document.getElementById('personal_intro').value;
                    clickCancelUpdIntro();
                }
            )
        }
        function clickCancelUpdIntro(){
            $('#intro_btn_box').hide();
            $('#updIntro').show();
            document.getElementById('personal_intro').value=token_intro;
            document.getElementById('personal_intro').disabled="disabled";
        }

    </script>
</body>
</html>
